<template>
  <div class="detail-container">
    <div>
      <div class="flex justify-between items-center">
        <div class="title">
          网口参数
        </div>
        <q-btn
          class="btn"
          label="配置"
          color="primary"
          unelevated
          @click="configSetting"/>
      </div>
<!--      <div class="area" v-if="!isPlc">-->
<!--        <div class="content">WAN</div>-->
<!--        <div class="content">-->
<!--          <span>联网方式:</span>-->
<!--          <span>{{wanInfo.wan.toUpperCase() || '&#45;&#45;'}}</span>-->
<!--        </div>-->

<!--        <div class="content">-->
<!--          <span>首选DNS地址:</span>-->
<!--          <span>{{wanInfo.dns || '&#45;&#45;'}}</span>-->
<!--        </div>-->

<!--        <div class="content">-->
<!--          <span>备选DNS地址:</span>-->
<!--          <span>{{wanInfo.dns1 || '&#45;&#45;'}}</span>-->
<!--        </div>-->
<!--      </div>-->
      <div class="flex justify-between">
        <div class="area">
          <div class="content">
            <span>WAN口配置:</span>
            <span>{{mobileConf.netPortConf ? (wanOptionsObj[mobileConf.netPortConf] || '--'): '--'}}</span>
          </div>
          <div class="content">
            <span>DNS2:</span>
            <span>{{dns2}}</span>
          </div>
          <div class="content" v-if="isMobile">Mobile配置</div>
          <div class="content" v-if="isMobile">
            <span>自动复位:</span>
            <span>{{watchDog}}</span>
          </div>
          <div class="content" v-if="isMobile">
            <span>APN:</span>
            <span>{{mobileConf.mobileApn || '--'}}</span>
          </div>
          <div class="content" v-if="isMobile">
            <span>密码:</span>
            <span>{{mobileConf.mobilePassword || '--'}}</span>
          </div>
          <div class="content">LAN1</div>
          <div class="content">
            <span>IP地址:</span>
            <span>{{lanInfo.lan0.ipaddr || '--'}}</span>
          </div>

          <div class="content">
            <span>子网掩码:</span>
            <span>{{lanInfo.lan0.netmask || '--'}}</span>
          </div>

          <div class="content">
            <span>网关:</span>
            <span>{{lanInfo.lan0.gateway || '--'}}</span>
          </div>

          <div class="content">
            <span>网卡速率:</span>
            <span>{{speedType[lanInfo.lan0.speed] || '--'}}</span>
          </div>

          <div class="content">
            <span>连接状态
              <span>
                  <q-icon name="iconfont icontubiao-72" class="font-18 text-grey" style="margin-top: -3px"/>
                  <q-tooltip max-width="300px">网线是否接入</q-tooltip>
                </span>
              </span>
            :
            <span v-if="lanInfo.lan0.carrier" class="status" :class="getActiveColor(lanInfo.lan0.carrier)"></span>
            <span>{{ connectObj[lanInfo.lan0.carrier] || '--' }}</span>
          </div>
        </div>
        <div>
          <div class="content">
            <span>DNS1:</span>
            <span>{{dns1 || '--'}}</span>
          </div>
          <div class="content" style="margin-top: 50px" v-if="isMobile">
            <span>拨号方式:</span>
            <span>{{mobileConf.mobileMode ? (modeOptionsObj[mobileConf.mobileMode] || '--') : '--'}}</span>
          </div>
          <div class="content" v-if="isMobile">
            <span>用户名:</span>
            <span>{{mobileConf.mobileUser || '--'}}</span>
          </div>
          <div class="content" style="margin-top: 25px">LAN2</div>
          <div class="content">
            <span>IP地址:</span>
            <span>{{lanInfo.lan1.ipaddr || '--'}}</span>
          </div>

          <div class="content">
            <span>子网掩码:</span>
            <span>{{lanInfo.lan1.netmask || '--'}}</span>
          </div>

          <div class="content">
            <span>网关:</span>
            <span>{{lanInfo.lan1.gateway || '--'}}</span>
          </div>

          <div class="content">
            <span>网卡速率:</span>
            <span>{{speedType[lanInfo.lan1.speed] || '--'}}</span>
          </div>

          <div class="content">
            <span>连接状态
              <span>
                  <q-icon name="iconfont icontubiao-72" class="font-18 text-grey" style="margin-top: -3px"/>
                  <q-tooltip max-width="300px">网线是否接入</q-tooltip>
                </span>
              </span>
            :
            <span v-if="lanInfo.lan1.carrier" class="status" :class="getActiveColor(lanInfo.lan1.carrier)"></span>
            <span>{{ connectObj[lanInfo.lan1.carrier] || '--' }}</span>
          </div>
        </div>
      </div>
    </div>

    <plc-dialog v-if="moduleType===0" ref="plcDialog" :mobileConf="mobileConf" controllerType="2" @successAll="successAll" :detailDriverParams="detailDriverParams" :lanInfo="lanInfo" :step="step"></plc-dialog>
    <cnc-dialog v-if="moduleType===1" ref="cncDialog" :mobileConf="mobileConf" :products="products" controllerType="1" @successAll="successAll" :detailDriverParams="detailDriverParams" :lanInfo="lanInfo" :step="step"></cnc-dialog>
  </div>
</template>

<script>
import PlcDialog from '../list-components/plc-dialog'
import CncDialog from '../list-components/gateway-dialog'
import { wanOptionsObj, modeOptionsObj, connectObj } from '../list-components/plc-dialog/constant'

export default {
  name: 'gateway-detail',
  components: {
    PlcDialog,
    CncDialog
  },
  data () {
    return {
      wanOptionsObj: wanOptionsObj,
      modeOptionsObj: modeOptionsObj,
      connectObj: connectObj,
      show: false,
      step: 0,
      speedType: {
        0: '自动',
        1: '10M半双工',
        2: '10M全双工',
        3: '100M半双工',
        4: '100M全双工'
      }
    }
  },
  props: {
    boxId: {
      type: String,
      default: ''
    },
    wanInfo: {
      type: Object,
      default: () => ({
        wan: '',
        wan1: '',
        dns: '',
        dns1: ''
      })
    },
    moduleType: {
      type: Number,
      default: null
    },
    products: {
      type: Array,
      default: () => []
    },
    detailDriverParams: {
      type: Object,
      default: () => {}
    },
    mobileConf: {
      type: Object,
      default: () => ({
        netPortConf: ''
      })
    },
    lanInfo: {
      type: Object,
      default: () => ({
        lan0: {
          dhcp: null,
          gateway: '',
          ipaddr: '',
          netmask: '',
          speed: null,
          carrier: null
        },
        lan1: {
          dhcp: null,
          gateway: '',
          ipaddr: '',
          netmask: '',
          speed: null,
          carrier: null
        }
      })
    }
  },
  computed: {
    isMobile () {
      return this.mobileConf.netPortConf === 'mobile'
    },
    dns1 () {
      if (this.mobileConf?.dns?.length > 0) {
        return this.mobileConf.dns[0]
      }
      return '--'
    },
    dns2 () {
      if (this.mobileConf?.dns?.length > 1) {
        return this.mobileConf.dns[1]
      }
      return '--'
    },
    watchDog () {
      if (this.mobileConf?.watchDog !== undefined) {
        return this.mobileConf.watchDog === 0 ? '否' : '是'
      }
      return '--'
    }
  },
  methods: {
    configSetting () {
      if (this.moduleType === 0) {
        this.step = 4
        this.$refs.plcDialog.showDialog()
      } else if (this.moduleType === 1) {
        this.step = 4
        this.$refs.cncDialog.showDialog()
      }
    },
    successAll () {
      this.$emit('successAll')
    },
    getActiveColor (value) {
      if (value === '0') {
        return 'disconnect'
      } else if (value === '1') {
        return 'connect'
      } else if (value === '2') {
        return 'error'
      }
      return ''
    }
  }
}
</script>

<style scoped lang="scss">
.status {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 5px;
}

.connect {
  background: $positive;
}

.disconnect{
  background: #666666;
}

.error {
  background: $negative;
}
</style>
<style scoped lang="stylus">
  .detail-container
    height 364px
    padding 20px
    .area
      margin-bottom 17.5px
    .title
      line-height 1
      font-size 16px
      font-weight 500
      color $primary

    .content
      color #333333
      line-height 1.8
</style>
